<div class="panel panel-inverse modal-dialog modal-lg" data-sortable-id="ui-general-1">
    <div class="panel-heading">
        <div class="panel-heading-btn">
            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" onclick="$('#user_avatar').modal('hide');"><i class="fa fa-times"></i></a>
        </div>
        <h4 class="panel-title">修改用户头像</h4>
    </div>
    <div class="panel-body " style="height: 600px;overflow: auto">
        <div class="superbox" data-offset="54" >
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-1.jpg"   class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-2.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-3.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-4.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-5.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-6.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-7.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-8.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-9.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-10.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-11.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-12.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-13.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-14.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-15.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-16.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-17.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-18.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-19.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-20.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-21.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-22.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-23.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/superbox-thumb-24.jpg"  class="superbox-img" /></div>
            <!--第二类头像-->
            <div class="superbox-list"><img src="img/avatar/20180414165920.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165927.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165754.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165815.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165821.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165827.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165834.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165846.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165855.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165909.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165914.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165936.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165942.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165947.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414165955.jpg"  class="superbox-img" /></div>
            <div class="superbox-list"><img src="img/avatar/20180414170003.jpg"  class="superbox-img" /></div>
        </div>
    </div>
</div>
<script data-th-inline="javascript">
    $(".superbox").find("img").each(function () {
        var $this = $(this);
        $this.on("click", function () {
            var target_src = $(this).attr("src");
            $.post(ctx + "user/changeAvatar", {"imgName": target_src}, function (r) {
                if (r.code === 0) {
                    $JuXue.n_success(r.msg);
                    $('#user_avatar').modal('hide');
                    $("#userinfoAvatar").attr("src", ctx + target_src);
                    $("#index_avatar").attr("src", ctx + target_src);
                } else $JuXue.n_danger(r.msg);
            });
        });
    });
</script>

